<template>
    <div>
        <transition 
        @before-enter="beforeEnter" 
        @enter="enter" 
        @after-enter="afterEnter"
        >
        <div ref="ball" class="ball" v-show=isShow></div>
        </transition>
        <div class="mui-card">
            <div class="mui-card-content">
                <swiper :bol1=false :lunbo="list"></swiper>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-header">{{exact.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="price">
                        <span>市场价：</span><span>￥{{exact.old}}</span>
                        <span>销售价：</span><span>￥{{exact.new}}</span>
                    </div>
                    <div class="number">
                        购买数量：
                        <numbox :remain="remain" @getCount="getCount_parent"></numbox>
                    </div>
                    <div class="buy">
                        <mt-button size="small" type="primary">立即购买</mt-button>
                        <mt-button size="small" type="danger" @click="runBall">加入购物车</mt-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-header">产品参数</div>
            <div class="mui-card-content">
                <div class="products_args mui-card-content-inner">
                    <span>商品货号：{{exact.pro_num}}</span>
                    <span>库存情况：{{exact.remain}}件</span>
                    <span>上架时间：{{exact.addedTime | formatTime("YYYY-MM-DD")}}</span>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="pro_introduce(id)">图文介绍</mt-button><br>
                <mt-button type="danger" size="large" plain @click="pro_comment(id)">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
import swiper from './swiper.vue';
import numbox from './goodsinfo_numbox.vue';
export default {
    data:function () {
        return{
            temp:[],
            list_all:[],
            list:[],
            id:this.$route.params.id,
            exact:[],
            isShow:false,
            count:1,
            remain:null,
        }
    },
    methods:{
        getCount_parent:function (count_get) {
            //把最大库存赋值为参数，把方法传给子组件，子组件调用后又把参数传回来赋值给最大库存
            this.count = count_get;
        },
        runBall:function () {
            this.isShow = true;
            var addObj = {
                id:this.id,
                count:this.count,
                price:this.exact.new,
                title:this.exact.title,
                url:this.exact.url,
                selected:true,
            };
            //用this.store.commit()的方式调用vuex中的mutations里的方法
            this.$store.commit('addToCar',addObj);
        },
        beforeEnter: function (el) {
            el.style.transform = "translate(0,0)";
        },
        // 当与 CSS 结合使用时
        // 回调函数 done 是可选的
        enter: function (el, done) {
            el.offsetWidth;
            //getBoundingClientRect()方法可以获取DOM元素的坐标
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            const badgePosition = document.getElementById('badge').getBoundingClientRect();
            const x_dist = badgePosition.left - ballPosition.left;
            const y_dist = badgePosition.top - ballPosition.top;
            el.style.transform = `translate(${x_dist}px,${y_dist}px)`
            el.style.transition = "all 0.6s cubic-bezier(.34,-0.3,1,.68)"
            done()
        },
        afterEnter: function (el) {
            this.isShow = false;
        },
        pro_introduce:function (id) {
            this.$router.push({name:'productintroduction' , params: {id}});
        },
        pro_comment:function (id) {
            this.$router.push({name:'productcomments' , params: {id}});
        },
        getlunbo:function () {
            this.$http.get('lib/interface7_shoplist.json').then((res)=>{
                if(res.body.status = 'ok'){
                    res.body.shoplists.forEach((item)=>{
                        this.temp = this.temp.concat(item);
                    });
                    this.temp.forEach((item)=>{
                        this.list_all.push(item.info_url);
                    });
                    this.list = this.list_all[this.id - 1];
                    this.exact = this.temp[this.id - 1];
                    this.remain = this.exact.remain;
                }
            });
        }
    },
    created:function () {
        this.getlunbo();
    },
    components:{
        swiper,
        numbox,
    }
}
</script>
<style lang="scss" scoped>
    .mui-card{
    .mui-card-header{
        font-weight: bold;
    }
    .mui-card-content{
        .mui-card-content-inner{
            color:#000;
            .price{
                margin-bottom: 10px;
                span:nth-child(2){
                    text-decoration: line-through;
                    margin-right: 10px;
                }
                span:nth-child(4){
                    color: #f10;
                }
            }
            .number{
                margin-bottom: 10px;
            }
            .buy{
                button{
                    height: 33px;
                    line-height: 33px;
                    font-size: 12px;
                }
            }
        }
    }
    .mui-card-footer{
        padding: 16px;
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        }
    .products_args{
        display: flex;
        flex-direction: column;
        span{
            color: rgb(148, 147, 147);
        }
        span:nth-child(2){
            padding: 10px 0;
        }
    }
    }
    .ball{
        width: 15px;
        height: 15px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        z-index: 99;
        top: 374px;
        left: 153px;
        // top: 530px;
        // left: 198px;
    }
</style>